import React, { useEffect, useRef, useState } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import { connect } from 'umi';
import PopImgShow from '@/components/PopImgShow';
import { Row, Col, Button, Tooltip } from 'antd';
import { useUpdateEffect } from 'ahooks'
import { AuditOutlined, FileTextOutlined } from '@ant-design/icons'
const Table = (props) => {
  const { loading, list, dispatch, activeTabKey, selectedKeys, rowSelection } = props;
  useUpdateEffect(() => {
    handleCallback()
  }, [
    activeTabKey, selectedKeys
  ])
  function getFileExtension(fileName) {
    // 使用正则表达式匹配文件名中的后缀部分
    const regex = /(?:\.([^.]+))?$/;
    const result = regex.exec(fileName);

    // 提取匹配到的后缀，如果没有后缀则返回空字符串
    const extension = result ? result[1] : '';

    return extension;
  }
  const renderContent = (url, type, falg = true) => {
    if (type === 'image') {
      return <PopImgShow width={30} url={url}></PopImgShow>
    } else if (type === 'video') {
      return <PopImgShow width={30} url={url}></PopImgShow>
    } else if (type === 'voice') {
      return <Tooltip title={url}>
        <a style={{ fontSize: 24 }} target="_blank" href={url}><AuditOutlined></AuditOutlined></a>
      </Tooltip>
    }
    else if (type === 'ebook') {
      return <Tooltip title={url}>
        <a style={{ fontSize: 24 }} target="_blank" href={url}><FileTextOutlined></FileTextOutlined></a>
      </Tooltip>
    } else {
      const fileExtension = getFileExtension(url);
      const color = {
        pptx: '#2db7f5',
        ppt: '#87d068',
        docx: '#108ee9',
        doc: '#2db7f5',
        xls: '#87d068',
        xlsx: '#108ee9',
        pdf: '#2db7f5',
        csv: '#87d068',
        xlsm: '#2db7f5',
        txt: '#87d068',
        zip: '#2db7f5',
        vtt: '#f50'
      }[fileExtension]
      console.log(color)
      return <Tooltip title={url}><div style={{ background: color || 'red', color: '#Ffffff', width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>{fileExtension}</div></Tooltip>
    }
  }
  const findParentIds = (data, childId, result = []) => {
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      if (item.id === childId) {
        result.push(item.id);
        if (item.parentId) {
          findParentIds(data, item.parentId, result);
        }
        break;
      } else if (item.subMaterialCategoryList) {
        findParentIds(item.subMaterialCategoryList, childId, result);
        if (result.length > 0 && item.id) {
          result.push(item.id);
          break;
        }
      }
    }
    return result;
  };
  const searchItems = [
    { label: '关键词', name: 'keyword' },
    {
      label: '资源渠道',
      name: 'materialType',
      type: 'select',
      select: {
        self: '自己制作',
        other: '其他渠道',
      },
    },
    {
      label: '状态',
      name: 'status',
      type: 'select',
      select: {
        0: '下架',
        1: '上架',
      },
    },
  ];
  const childRef = useRef();
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };

  const getColumns = [
    {
      title: '素材名称',
      dataIndex: 'materialName',
    },
    {
      title: '封面图',
      dataIndex: 'content',
      render: (e, record) => {
        const { contentType, cover } = record
        if (contentType === 'video') {
          const { url } = JSON.parse(cover);
          return renderContent(url, contentType);
        }
        const { url } = JSON.parse(e);
        return renderContent(url, contentType);
      },
    },
    {
      title: '分类名称',
      dataIndex: 'categoryName',
    },
    {
      title: '创建者名称',
      dataIndex: 'createAdminName',
    },
    {
      title: '使用次数',
      dataIndex: 'useAmount',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '下架',
          1: '上架',
        }[e];
      },
    },

  ];
  return (<div>
    <TableDataBlock
      cRef={childRef}
      rowSelection={rowSelection}
      loading={loading}
      searchItems={searchItems}
      params={{ contentType: activeTabKey, categoryId: selectedKeys.toString() }}
      columns={getColumns}
      rowKey={(record) => `${record.id}`}
      dispatchType="liveStreaming/fetchListMaterial"
      {...list}
    ></TableDataBlock>
  </div>)
}

export default connect(({ loading, liveStreaming }) => ({
  list: liveStreaming.materialList,
  loading: loading.models.liveStreaming,
}))(Table);
